<template>
  <div class="personnel-relation-device">
    <DynamicForm
      ref="dynamicFormRef"
      @click="callBack"
      :rulesForm="state.rulesForm"
      :refresh="state.refresh"
    />
    <DynamicDialog
      ref="dynamicDialogRef"
      @click="callBack"
      :dialogVisible="state.visible"
      :button="{ cancel: false, confirm: false }"
      title="选择设备"
    >
      <template #dialog>
        <SearchTable
          ref="searchTableRef"
          v-if="state.visible"
          @click="callBack"
          :deviceType="state.deviceType"
          :rulesForm="state.rulesForm"
          :rules="state.rules"
          width="500px"
        />
      </template>
    </DynamicDialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, defineEmits, defineProps } from "vue";

import DynamicForm from "@/components/layout/form/dynamic-form.vue";
import DynamicDialog from "@/components/layout/dialog/dynamic-dialog.vue";
import SearchTable from "@/views/monitor/device/search/Index";
import { DeviceBedRelation } from "@/model/DeviceBedRelation";
import { deleteBedApi, insertBatchApi } from "@/api/device";
import { ElMessage } from "element-plus";
import { relationPersonnelForms } from "@/assets/script/monitor/forms/personnel/personnel-form";
import { batchAddApi, findListApi } from "@/api/personnel";
import { PersonnelDevice } from "@/model/PersonnelDevice";

const dynamicFormRef = ref(DynamicForm);
const dynamicDialogRef = ref(DynamicDialog);
const searchTableRef = ref(SearchTable);

const props = defineProps({
  row: {} as any,
});
const emits = defineEmits<{ (e: "click", data: object): void }>();

const state = reactive({
  rulesForm: relationPersonnelForms,
  refresh: null as any,
  visible: false,
  deviceType: null as any,
  data: {} as any,
  row: {} as any,
  device: [] as any,
});

onMounted(() => {
  state.row = props.row;

  findList({ personnelId: state.row.id });
});

const callBack = (data: any) => {
  switch (data.type || "") {
    case "dialogClose":
      state.visible = false;
      break;
    case "search":
      state.deviceType = data.data;
      state.visible = true;
      break;
    case "choice":
      // eslint-disable-next-line no-case-declarations
      let card = state.rulesForm[0].card.find(
        (f: any) => f.searchKey === data.value
      );
      card[card.name] = data.data.deviceCode;
      state.data[card.name] = data.data;
      state.refresh = Math.random();
      state.visible = false;
      break;
    case "submit":
      // eslint-disable-next-line no-case-declarations
      let personnelDevice: PersonnelDevice[] = [];
      for (let v in data.data) {
        if (!data.data[v]) {
          continue;
        }
        let item = state.data[v];
        if (!item) {
          continue;
        }
        personnelDevice.push({
          deviceId: item.id,
          deviceName: item.deviceName,
          deviceCode: item.deviceCode,
          deviceType: item.constCode,
          deviceTypeName: item.constName,
          personnelId: state.row.id,
        });
      }
      if (personnelDevice.length === 0) {
        personnelDevice.push({
          personnelId: state.row.id,
        });
      }
      batchAddApi(personnelDevice).then((data: any) => {
        if (data.code === 0) {
          ElMessage.success("保存成功！");
          emits("click", { type: "dialogClose", data: true });
        } else {
          ElMessage.success("保存失败！");
        }
      });
      console.log("callBack", personnelDevice);
      break;
    default:
      console.log("callBack", data);
      break;
  }
};

const findList = (params: any) => {
  findListApi(params).then((data: any) => {
    state.device = data;
    // 去掉默认值
    let card = state.rulesForm[0].card;
    card.forEach((e: any) => {
      let item = data.find((f: any) => f.deviceType === e.name);
      if (item) {
        state.data[e.name] = {
          constCode: item.deviceType,
          constName: item.deviceTypeName,
          deviceName: item.deviceName,
          deviceCode: item.deviceCode,
          id: item.deviceId,
        };
        e[e.name] = item.deviceCode;
      } else {
        e[e.name] = null;
      }
    });
    console.log("state.rulesForm", state.rulesForm);
    state.refresh = Math.random();
  });
};
</script>
